<template>
<div>
    	<section class="header text-center">
		<nav class="navbar navbar-expand-lg navbar-light navbar-custom">
			<div class="container"><a class="navbar-brand" href="/"><i class="fas fa-shopping-bag primary-color mr-1"></i>{{$t('m.name')}}</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-1" aria-controls="navbar-1" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
				<div class="collapse navbar-collapse pull-xs-right justify-content-end" id="navbar-1">
					<ul class="navbar-nav mt-2 mt-md-0">
						<li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
						<li class="nav-item dropdown mega-menu"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Shop </a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown">
								<div class="container">
									<div class="divider"></div>
									<div class="row">
										<div class="col-md-2">
											<h6 class="text-uppercase">Women's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">Men's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">Girl's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">Boy's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-4">
											<h6 class="text-uppercase">Featured Items</h6>
											<div class="row">
												<div class="col-6 text-center"><a href="item.html">
													<img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
													<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
													<p><span class="emphasis">$49.00</span></p>
													<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
										</div>
												<div class="col-6 text-center"><a href="item.html">
													<img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
													<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
													<p><span class="emphasis">$49.00</span></p>
													<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
										</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</li>
						<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages </a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="index.html">Homepage</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="catalog.html">Catalog</a>
								<a class="dropdown-item" href="item.html">Item Detail</a>
								<a class="dropdown-item" href="cart.html">Cart</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="contact.html">Contact</a>

							</div>
						</li>
						<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
					<li class="nav-item dropdown">


					<!-- 检索功能 -->
					<Search @search="search" v-model="text">fvgdsv</Search>
					
					
					
					
					
					</li>
						<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-shopping-cart"></i> <span class="badge badge-pill badge-primary">3</span></a>
							<div class="dropdown-menu dropdown-menu-right dropdown-cart" aria-labelledby="navbarDropdown">
								<h6>3 Items <span class="emphasis">$147.00</span></h6>
								<div class="dropdown-divider"></div>
								<ul class="shopping-cart-items">
									<li class="row">
										<div class="col-3">
											<img src="images/placeholder-product.jpg" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
									<li class="row">
										<div class="col-3">
											<img src="images/placeholder-product.jpg" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
									<li class="row">
										<div class="col-3">
											<img src="images/placeholder-product.jpg" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
								</ul>
								
								<a href="cart.html" class="btn btn-lg btn-full-width btn-primary" style="margin: 0;">View Cart</a></div>
						</li>
					</ul>
				</div>

   
				<div>
					<!-- 如果没有用户名 -->
					<div v-if="username==''">
					<router-link to="/login">{{$t('m.login')}}</router-link> /
            		<router-link to="/register">{{$t('m.register')}}</router-link>
					</div>

					<!-- 有用户名 -->
					<div v-else> 
						{{$t('m.welcome')}}:<router-link to="/myprofile">{{username}}</router-link>  
						<a href="#" @click="loginout">{{$t('m.logout')}}</a></div>

						&nbsp;&nbsp;
						<a href="/addgoods">添加商品</a>

				</div>
			</div>
			<!-- 国际化语言开关 -->
			<h-switch v-model="lang" @change="lang_change">中 / English</h-switch>
		</nav>
	</section>
</div>
  
</template>

<script>
export default {
	data(){
		return{
			// username:localStorage['username'] 直接获取username
			username:"",
			lang:false,
			//检索关键字
			text:""
		}
	},

mounted:function(){
	//钉钉接受参数
    var dingding_id = this.$route.query.dingding_id;
    if(dingding_id){
      //自动登录
      localStorage.setItem('username',dingding_id);
      localStorage.setItem('uid',this.$route.query.uid)
	}
	
	//微博登录
	var sina_id = this.$route.query.sina_id;
	var uid = this.$route.query.uid
	console.log(sina_id)
	if(sina_id){
		//自动登录
		localStorage.setItem("username",sina_id);
		localStorage.setItem("uid",uid)
	}
	
	
	//判断用户是否登录
	let uname = localStorage.getItem("username");

	//说明登录或者已登出
	if(uname==null){
		this.username = "";
	}else{
		this.username = uname
	}
	
	//自动判断选择语言  按浏览器配置来自动选择语言
	console.log(navigator.language)
	if(navigator.language == "zh-CN"){
		this.$i18n.locale = "cn"
	}else{
		this.$i18n.locale = "en"


	}
	//判断语言是否选择
	// this.$i18n.locale = localStorage.getItem("lang")
	// if(this.$i18n.locale == "cn"){
	// 	this.lang = 0
	// }else{
	// 	this.lang = 1
	// }

},
    

methods:{
	//检索逻辑
	search:function(){
		console.log(this.text)
		this.$router.push({'path':'/search',query:{word:this.text}})

	},
	//语言切换事件
	lang_change:function(){
		console.log(this.lang)

		//判断语言
		if(this.lang == true){
			//英文
			this.$i18n.locale = "en"
			//localStorage 建立 key 和 value
			localStorage.setItem("lang","en")

		}else{
			//单选
			this.$i18n.locale = "cn"
			localStorage.setItem("lang","cn")

		}
	},

	loginout: function() {
			//清除session  刷新页面 created 是模板渲染前执行  mounted是模板渲染后执行
			// sessionStorage.clear();
			// this.$router.go(0);
			//删除 localstorage
			localStorage.removeItem("username")

			//全量删除
			// localStorage.clear()

			//跳转
			this.$router.push('/login')
    }

}
}
</script>

<style>

</style>